<template>
	<view class="wrapper">
		<u-navbar :title="$t('contacts.Group-Chats')" @leftClick="handlePageBack" bgColor="#F6F6F6"
			titleStyle="font-weight: 500; color: #000000;" :placeholder="true">
		</u-navbar>
		<!-- 搜索框 -->
		<view class="search-content">
			<u-input :placeholder="$t('index.Search')" v-model="groupName" placeholderClass="placeholderClass" border="none"
				inputAlign="center" shape="circle" :customStyle="{
          background: '#fff',
          height: '76rpx',
          padding: '0 38rpx',
          'font-size': '26rpx',
        }" @input="handleSearch"></u-input>
			<view class="iconfont icon-sousuo serch-icon" v-show="!groupName"></view>
		</view>

		<view class="createGroup" @click="createGroupHandle">
			<view class="iconfont icon-xinzenghaoyou create-icon"> </view>
			<text>{{ $t("contacts.Create-a-New-Group") }}</text>
		</view>

		<u-list class="chat-content" @scrolltolower="scrolltolower"
			height="calc(100vh - 44px - 300rpx - var(--status-bar-height))">
			<u-list-item v-for="(item, index) in groupList" :key="index" @click="gotoGroupPage(item)">
				<view class="chat-line" @click="gotoGroupPage(item)">
					<image class="group-avatar" :src="item.avatarCompress" v-if="item.avatar" mode="aspectFill"></image>
					<view class="group-avatar" v-else :style="{ background: `${getDefaultColor(item.avatarColorCode)}` }">
						{{ getGroupChatKeyWord(item.groupName) }}
					</view>
					<view class="omit" style="flex: 1">{{ item.groupName }}</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	import {
		getRandomColor
	} from "@/utils/common.js";
	import {
		queryGroupList
	} from "@/services/group";
	import {
		mapState,
		mapMutations,
		mapActions
	} from "vuex";
	import {
		debounce
	} from '@/utils/util.js'
	
	import { getDefaultColor } from "@/utils/index";

	export default {
		data() {
			return {
				groupName: "",
				pageTotal: "",
				pageNum: 1,
				pageSize: 15,
				groupList: [],
			};
		},
		computed: {
			...mapState(["userId", "friendsList"]),
		},
		methods: {
			...mapMutations(["SET_SELECT_FRIEND_OPTION"]),
			getDefaultColor,
			gotoGroupPage(item) {
				this.handleToPage(`/pages/chat/GroupChat?groupId=${item.groupId}`);
				console.log(item);
			},
			handlePageBack() {
				console.log(1212);
				uni.switchTab({
					url: "/pages/friends/Friends",
				});
			},
			handleSearch: debounce(function() {
				this.pageNum = 1
				this.getGroupList();
			}, 300),
			handleToPage(url) {
				uni.navigateTo({
					url: url,
				});
			},
			createGroupHandle() {
				this.SET_SELECT_FRIEND_OPTION({
					// 用户列表
					UserList: this.friendsList,
					// 默认选中用户id列表，即不可取消的用户id
					defaultIdList: [],
					type: 1,
					tipText: this.$t("contacts.Create-Group-tips"),
					title: this.$t("contacts.New-Group"),
				});
				this.handleToPage("/pages/selectFriend/selectFriend");
			},
			// 获取随机渐变色
			getRandomColor1() {
				return getRandomColor();
			},
			// 获取群聊头像中的字母
			getGroupChatKeyWord(val) {
				if (val) {
					// const arr = val.split(/\s+/)
					// const newName = arr[1]
					//   ? arr[0].slice(0, 1) + arr[1].slice(0, 1)
					//   : arr[0].slice(0, 1)
					// return newName.toLocaleUpperCase()
					const arr = val.trim()
					const newName = arr.slice(0, 1)
					return newName.toLocaleUpperCase()
				}
			},
			async getGroupList() {
				const resp = await queryGroupList({
					userId: this.userId,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					groupName: this.groupName,
					moduleType: 0
				});
				if (!resp.success) return;
				this.pageTotal = resp.result.total;
				this.groupList =
					this.pageNum === 1 ?
					resp.result.rows :
					this.groupList.concat(resp.result.rows || []);
			},
			//触底加载更多
			scrolltolower() {
				if (this.pageNum * this.pageSize >= this.pageTotal) return;
				this.pageNum++;
				this.getGroupList();
			},
		},
		onShow() {},
		onLoad() {
			this.getGroupList();
		},
	};
</script>

<style scoped lang="scss">
	.omit {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		word-wrap: break-word;
		white-space: pre-wrap;
		word-break: break-all;
	}

	.wrapper {
		box-sizing: border-box;

		.search-content {
			position: relative;
			width: 690rpx;
			height: 76rpx;
			margin: 0 auto;
			margin-top: 40rpx;

			/deep/ .placeholderClass {
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #878787 !important;
				margin-left: 24rpx;
			}

			.serch-icon {
				position: absolute;
				top: 50%;
				left: 277rpx;
				color: #878787;
				font-size: 30rpx;
				transform: translateY(-50%);
			}
		}

		.createGroup {
			width: 750rpx;
			height: 120rpx;
			line-height: 120rpx;
			background: #ffffff;
			margin: 30rpx 0;
			color: #61bdb2;
			padding: 0 43rpx;
			box-sizing: border-box;

			.create-icon {
				display: inline-block;
				font-size: 40rpx;
			}

			text {
				margin-left: 44rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
			}
		}

		.suspension-frame {
			position: fixed;
			top: 50%;
			transform: translateY(-50%);
			right: 20upx;
			width: 40upx;
			background: rgba($color: #000000, $alpha: 0.4);
			border-radius: 20upx;
			box-sizing: border-box;
			padding: 24upx 0;
			text-align: center;

			.text {
				font-size: 22upx;
				font-weight: 400;
				color: #ffffff;
				margin: 10upx 0;

				&.active {
					margin: 0 auto;
					width: 34upx;
					height: 34upx;
					background: #61bdb2;
					border-radius: 17upx;
				}
			}
		}

		.chat-content {
			background-color: #fff;

			.chat-line {
				display: flex;
				flex-direction: row;
				align-items: center;
				background-color: #fff;
				height: 120rpx;
				margin: 0 30rpx;
				border-bottom: 2rpx solid #f6f6f6;

				.group-avatar {
					width: 80rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: linear-gradient(0deg, #8bd7f6 0%, #5cbde5 99%);
					border-radius: 50%;
					margin-right: 33rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
</style>